<template>
	<view class="login">
		<!-- 顶部图标 -->
		<image :src="$IMG_URL('/static/newVersion/login3.png')" mode="widthFix" class="icon"></image>
		<image :src="$IMG_URL('/static/user/login2.png')" mode="widthFix" class="icon2"></image>

		<!-- 登录按钮 -->
		<button class="btn" hover-class="none" :open-type="agreementChecked?'getPhoneNumber':''"
			@getphonenumber.stop="login" v-if="agreementChecked">
			手机号快捷登录/注册
		</button>
		<button class="btn" hover-class="none" @click="login" v-else>
			手机号快捷登录/注册
		</button>


		<view class="bottom">
			<view class="bottom-in">
				<!-- 勾选区：单独一行 -->
				<view class="agreement-check" @click.stop="changeRadio">
					<image
						:src="agreementChecked?$IMG_URL('/static/newVersion/agreement2.png'):$IMG_URL('/static/newVersion/agreement1.png')"
						mode="widthFix" class="radio-icon"></image>
					<text class="check-text">我已阅读并同意：</text>
				</view>

				<!-- 协议文本区：单独一行并排 -->
				<view class="agreement-links">
					<text class="link-text" @click.stop="routeUserAreement">《优机小羊用户协议》</text>
					<text class="link-text" @click.stop="personalAgreement">《优机小羊个人信息授权》</text>
					<text class="link-text" @click.stop="routePrivacyAreement">《隐私政策》</text>
				</view>
			</view>
		</view>

		<!-- 提示组件 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		wechatlogin
	} from '@/api/user.js'
	export default {
		props: {
			isLogin: {
				type: Number,
				default: 1,
				required: true
			}
		},
		data() {
			return {
				agreementChecked: false // 协议勾选状态
			}
		},
		methods: {
			// 个人信息授权协议跳转
			personalAgreement() {
				uni.navigateTo({
					url: '/pageA/agreement/member?form=informationauth'
				})
			},

			// 用户协议跳转
			routeUserAreement() {
				uni.navigateTo({
					url: '/pageA/agreement/member?form=user'
				})
			},

			// 隐私政策跳转
			routePrivacyAreement() {
				uni.navigateTo({
					url: '/pageA/agreement/member?form=privacy'
				})
			},

			// 切换协议勾选状态
			changeRadio() {
				this.agreementChecked = !this.agreementChecked
			},

			// 登录逻辑
			login(e) {
				let that = this
				if (this.agreementChecked) {
					// 微信登录获取code
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							// 调用登录接口
							wechatlogin({
								code: loginRes.code,
								phoneCode: e.detail.code
							}).then((({
								data: res
							}) => {
								if (res.code == 1) {
									// 存储token
									uni.setStorage({
										key: 'token',
										data: res.data.userinfo.token
									})
									// 判断是否需要完善资料
									if (!res.data.userinfo.is_intact) {
										uni.setNavigationBarTitle({
											title: '完善资料'
										});
										that.$emit('changeIslogin', 2)
									} else {
										// 传递店铺ID（如有）
										const shopId = uni.getStorageSync('SHOPID')
										if (shopId) uni.$emit('SHOPID', shopId)
										// 返回上一页
										uni.navigateBack({
											delta: 1
										})
									}
								} else {
									// 登录失败提示
									that.$refs.uToast.show({
										title: res.msg,
										type: 'error',
										icon: false
									})
								}
							}))
						},
					})
				} else {
					// 未勾选协议提示
					uni.showModal({
						title: '优机小羊用户协议与隐私政策',
						content: '为了您能够正常使用我们的服务，您需要阅读并同意《优机小羊用户协议和隐私政策》。',
						showCancel: true,
						cancelText: '不同意',
						confirmText: '同意',
						confirmColor: '#73F0EA',
						success: function(res) {
							that.agreementChecked = res.confirm
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff; // 避免与页面背景融合
		min-height: 100vh;
		padding-bottom: 60rpx; // 底部留空，避免被遮挡
	}

	/* 顶部图标样式 */
	.icon {
		margin-top: 209rpx;
		width: 160rpx;
		height: 116rpx;
		object-fit: contain;
	}

	.icon2 {
		margin-top: 32rpx;
		width: 178rpx;
		height: 62rpx;
		object-fit: contain;
	}

	/* 登录按钮样式 */
	.btn {
		margin-top: 184rpx;
		width: 654rpx;
		height: 88rpx;
		background: #73F0EA;
		border-radius: 16rpx;
		font-size: 34rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none; // 清除默认边框
	}


	.bottom {
		margin-top: 30rpx;
		width: 90%;
		max-width: 700rpx;
	}

	.bottom-in {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}


	.agreement-check {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.radio-icon {
		width: 24rpx;
		height: 24rpx;
		flex-shrink: 0;
	}

	.check-text {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #333333;
	}


	.agreement-links {
		width: 100%;
		max-width: 700rpx;
		display: flex;
		align-items: center;
		gap: 8rpx;
		flex-wrap: wrap;
	}

	.link-text {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #73F0EA;
		white-space: nowrap;
	}
</style>